<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>

<script>
    var btns = document.querySelectorAll('button');
    // 1.传统方式注册事件
    // 同一个元素同一个事件只能设置一个处理函数,
    // 最后注册的处理函数将会覆盖前面祖册的处理函数
    btns[0].onclick = function () {
        alert('hi');
    }

    btns[0].onclick = function () {
        alert('how are you');
    }

    // 2.事件监听注册事件 addEventListener
    // (1) 里面的事件类型是字符串, 必定加引号, 而且不带on
    // (2) 同一个元素 同一个事件可以添加多个侦听器 (事件处理程序)
    //      第三个参数   options?   ? -> 表示可选
    // addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
    btns[1].addEventListener('click', function () {
        alert(22);
    })
    btns[1].addEventListener('click', function () {
        alert(33);
    })

    // 3.attachEvent ie9以前的版本支持, 建议不要用!!!
    btns[2].attachEvent('onclick', function () {
        alert(44);
    })

    // 注册时间兼容性解决方案, --> 封装函数, 判断浏览器版本
</script>
</body>
</html>
